<!--自封闭标签：img br hr-->
<!--块级元素（独占一行）：div/p/h1-h6/table/ul-->
<!--行内元素（一行可以展示多个，排不下才会换行）：span/img/a-->

<!-- 文档类型 -->
<!DOCTYPE html>
<!-- 语言 en/zh-->
<html lang="zh-cn">
  <!-- head网页头，一般用来包裹Meta规范、视口、style写入、link引用 -->

  <head>
    <!-- 编码规范 -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 网页标题 -->
    <title>My First Html Demo</title>
    <!-- 网页图标 rel="icon" href: 图标⽂件的路径 type="image/x-icon" -->
    <link rel="icon" href="../favicon.ico" type="image/x-icon" />
    <!-- 内部样式 -->
    <style>
      /* 通过id设置样式 */
      #name {
        /*边框*/
        /* border: 1px solid red;  */
        /*高度*/
        height: 50px;
        /* 内间距10px */
        padding: 10px;
        /* 字体加粗 */
        font-weight: 700;
        /* 底部边框设置 */
        border-bottom: 1px solid red;
      }

      /* 通过类名设置样式 */
      .name {
        /*背景颜色*/
        background-color: aqua;
      }

      /* 与div相邻元素样式的设置 */
      div + p {
        /* 字体大小 */
        font-size: 18px;
      }

      /* 将ui下的li设置为行内布局 */
      ul > li {
        /*将块级元素转成行内元素*/
        display: inline-block;
        /* 右间距为10 */
        margin-right: 10px;
      }

      p {
        margin: 0;
      }

      /* td {
        width: 100px;
      } */
    </style>
  </head>
  <!-- body用来布局 -->

  <body>
    <!-- 头部区域 -->
    <header>
      <!-- 顶部导航信息 -->
      <nav>
        <!-- 无需列表（如需横向排列将li样式设置为display： inline-block） -->
        <ul>
          <!-- a跳转到具体id模块 -->
          <li><a href="#home">首页</a></li>
          <li><a href="#about">关于</a></li>
          <li><a href="#contact">联系我</a></li>
        </ul>
        <!-- 有序列表 -->
        <ol>
          <li>第⼀项</li>
          <li>第⼆项</li>
          <li>第三项</li>
        </ol>
        <!-- 关联列表 -->
        <dl>
          <dt>HTML</dt>
          <dd>超⽂本标记语⾔</dd>
          <dt>CSS</dt>
          <dd>层叠样式表</dd>
          <dt>JavaScript</dt>
          <dd>客户端脚本语⾔</dd>
          <dd>客户端脚本语⾔</dd>
          <dd>客户端脚本语⾔</dd>
        </dl>
      </nav>
      <!-- id为name， class为name的div（块级容器） -->
      <div id="name" class="name">块级内容区域</div>
    </header>
    <!-- 主页面区域 -->
    <main>
      <!-- 第一部分 -->
      <section id="home">
        <!-- br：换行 -->
        <p id="paragraph">这是一段文字<br />这是一段文字</p>
        <!-- accesskey: 键盘快捷键实现点击效果 -->
        <button id="changeButton" accesskey="s">点击改变颜色</button>
        <div id="test" data-title="true">test</div>
        <button id="myButton" class="myButton">追加文本</button>
        <div>
          <!-- span为行内容器 -->
          <span>
            <!-- 跳转到其他页面 -->
            <a href="css-demo.html" target="_parent">test.html</a>
            <!-- 换行标签 -->
            <br />
            <!-- 跳转到百度页面 -->
            <a href="https://www.baidu.com"></a>
            <!-- 唤起邮箱 -->
            <a href="mailto:info@example.com">发送邮件</a>
          </span>
        </div>
        <!-- h1-h6 标题标签，不同级别（大纲视图） -->
        <h1>h1</h1>
        <h2>h2</h2>
        <h3>h3</h3>
        <h4>h4</h4>
        <!-- 斜体强调标签 -->
        <em>斜体强调</em>
        <!-- 加粗强调标签 -->
        <strong>加粗强调</strong>
        <!--contenteditable：内容可编辑-->
        <div contenteditable="true">
          <p>这段文字可以被用户编辑</p>
        </div>
        <!-- 有序列表 -->
        <ol>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ol>
        <!-- 无序列表、特殊字符 -->
        <ul>
          <li>⼩于号：&lt;（HTML 实体：&amp;lt;）</li>
          <li>⼤于号：&gt;（HTML 实体：&amp;gt;）</li>
          <li>和号：&amp;（HTML 实体：&amp;amp;）</li>
          <li>双引号：&quot;（HTML 实体：&amp;quot;）</li>
          <li>
            单引号：&apos; 或 &lsquo;（HTML 实体：&amp;apos; 或 &amp;lsquo;）
          </li>
        </ul>
        <ul>
          <li>版权符号：&copy;（HTML 实体：&amp;copy;）</li>
          <li>注册商标符号：&reg;（HTML 实体：&amp;reg;）</li>
          <li>不断⾏空格：&nbsp;（HTML 实体：&amp;nbsp;）</li>
          <li>乘号：&times;（HTML 实体：&amp;times;）</li>
          <li>除号：&divide;（HTML 实体：&amp;divide;）</li>
        </ul>
        <!-- ul内嵌 -->
        <ul>
          <li>
            <span>中国</span>
            <ul>
              <li>
                <span>北京</span>
                <ul>
                  <li>丰台区</li>
                  <li>海淀区</li>
                  <li>⼤兴区</li>
                </ul>
              </li>
              <li>上海</li>
              <li>成都</li>
            </ul>
          </li>
          <li>韩国</li>
          <li>美国</li>
          <li>俄罗斯</li>
        </ul>
        <dl>
          <dt>HTML</dt>
          <dd>超⽂本标记语⾔</dd>
          <dt>CSS</dt>
          <dd>层叠样式表</dd>
          <dt>JavaScript</dt>
          <dd>客户端脚本语⾔</dd>
          <dd>客户端脚本语⾔</dd>
          <dd>客户端脚本语⾔</dd>
        </dl>
        <!-- pre用于保留文本格式的容器，如保留换行空格等信息，一般用于代码和日志等信息展示 -->
        <pre>
        function greet() {  
        console.log("Hello, World!");  }</pre
        >

        <table border="1" cellspacing="0" width="500">
          <caption>
            标题
          </caption>
          <!-- align: 横向居中居左居右, valign:纵向 -->
          <thead height="40" align="left" valign="bottom">
            <tr>
              <th>头1</th>
              <th>头2</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>列1</td>
              <td>列2</td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td>尾1</td>
              <td>尾2</td>
            </tr>
          </tfoot>
        </table>
      </section>
      <!-- 第二部分 -->
      <section id="about">
        <!-- src为图片地址，alt为图片不显示时的提示信息 -->
        <img src="../img/myimg.jpeg" alt="myimg.png" width="200" />
      </section>
      <section id="contact">
        <!-- 联系信息 -->
        <address>
          Email: <a href="mailto:info@example.com" target="">info@example.com</a
          ><br />
          Phone: 123-456-7890
        </address>
      </section>
    </main>
    <footer>
      <p>&copy; 2023 My Website. All rights reserved.</p>
      <!-- 分割线 -->
      <hr />
    </footer>

    <!-- 页面内js内容区域 -->
    <script type="text/JavaScript">
      // id为changeButton的点击事件，将id为paragraph的字体颜色设置为红色
      document
        .getElementById("changeButton")
        .addEventListener("click", function () {
          document.getElementById("paragraph").style.color = "red";
        });

      // 类名为myButton的第一个元素的点击事件，在id为test元素后追加一个span
      document.getElementsByClassName("myButton")[0].addEventListener("click", () => {
        var span = document.createElement('span');
        span.textContent = "加入的信息"
        document.getElementById("test").appendChild(span);
      })
    </script>
  </body>
</html>
